<template>
  <el-cascader
    ref="cascader"
    :value="value"
    @input="handleInput"
    :options="options"
    :props="{
      expandTrigger: 'hover',
      multiple,
      checkStrictly: !linkage,
      emitPath: linkage
    }"
    :clearable="clearable"
    :show-all-levels="showAllLevels"
    collapse-tags
    :placeholder="placeholder"
    :disabled="disabled"
    :filterable="filterable"
    :filter-method="filterMethod"
    :popper-class="popperClass"
    @change="handleChange"
  >
  </el-cascader>
</template>
<script>
export default {
  name: 'CCascader',
  components: {},
  props: {
    value: [String, Number, Array],
    options: {
      type: Array,
      default() {
        return []
      }
    },
    multiple: { type: Boolean, default: false },
    clearable: { type: Boolean, default: false },
    showAllLevels: { type: Boolean, default: false },
    placeholder: { type: String, default: '' },
    disabled: { type: Boolean, default: false },
    filterable: { type: Boolean, default: true },
    popperClass: { type: String, default: '' },
    linkage: { type: Boolean, default: false }
  },
  data() {
    return {}
  },
  computed: {},
  watch: {},
  beforeCreate() {},
  created() {},
  beforeMount() {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  activated() {},
  deactivated() {},
  beforeDestroy() {},
  destroyed() {},
  methods: {
    handleChange(val) {
      const { multiple } = this
      const data = this.$refs.cascader.getCheckedNodes().map(item => item.data)
      this.$emit('change', val, multiple ? data : data[0])
    },
    handleInput(val) {
      this.$emit('input', val)
    },
    filterMethod(node, keyword) {
      const { label } = node || {}
      console.log(keyword, label)
      return label && label.includes(keyword)
    }
  }
}
</script>
<style lang="scss">
@include admin {
  .c-cascader {
  }
}
</style>
